<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>室内运动轨迹跟踪</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>室内运动轨迹跟踪</h1>
        <div class="controls">
            <button id="startBtn">开始跟踪</button>
            <button id="resetBtn">重置</button>
            <div class="status">状态: <span id="statusText">准备就绪</span></div>
        </div>
        <div class="canvas-container">
            <canvas id="trackCanvas"></canvas>
        </div>
        <div class="info">
            <div>加速度: <span id="acceleration">X: 0, Y: 0, Z: 0</span></div>
            <div>角速度: <span id="rotation">α: 0, β: 0, γ: 0</span></div>
            <div>当前位置: <span id="position">X: 0, Y: 0</span></div>
        </div>
    </div>
    <script src="motionTracker.js?v=1.0.20"></script>
</body>
</html> 